<script lang="ts">
import { defineComponent, ref, watch, onMounted,onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getUserLike } from '../api/User'
import { viewCount, filters, vidotime } from '../hooks/filters'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
import { useScroll } from '../hooks/useScroll'

export default defineComponent({
  components: {},
  props:['useractive'],

  setup(props) {
    const store = useCounterStore()
    const { likearr, idarr, collectlikearr } = storeToRefs(store)
    // 作为 action 的 increment 可以直接解构
    const { unlikeFuns, likeFuns, increment, incrementfalse, collectFuns, uncollectFuns } = store;
    let useractive = props.useractive;
    let router = useRouter();
    let route = useRoute();
    let active = ref(null); 0
    let userid: any = route.query.userid
    let userLikeList: any = ref([]);

    let page: number = 1;
    let scrollTop = ref<number>(document.documentElement.scrollTop);
    let isbottom = ref(false);
    let isloading: any = ref(false);
    let total: any = ref();

    let click_user = (id: any) => {
      console.log("点击了头像", id);
      router.push({
        path: '/userdetail',
        query: {
          userid: Number(id),
        }
      })
    }
    let click_video = (videoid: any, video_library_id: any) => {
      router.push({
        path: '/videoDes',
        query: {
          aid: videoid,
          mid: video_library_id,
          useractive,
          userid,
        }
      })
    }
    let getUserLikeFun = (userid: any) => {
      console.log(1)
      getUserLike(userid, {page}).then((data) => {
        console.log('用户喜欢data=>', data);
        total.value = data.data.total;
        data.data.list.forEach((item: any) => {
          userLikeList.value.push(item)
        })
        // userLikeList.value = data.data.list
        console.log('用户喜欢userLikeList=>', userLikeList.value)
      })
    };
    let onscroll = () => {
      scrollTop.value = document.documentElement.scrollTop;
      isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
      console.log('9999999999999', isbottom.value)
    }
    watch(isbottom, () => {
      console.log(page*10,total.value)
      if (page * 10 >= total.value) {
        console.log(111111111);
        return;
      }
      if (isbottom.value) {
        page += 1;
        isloading.value = true;
        console.log('222222222page=>', page);
  
        console.log('isloading', isloading.value);
        setTimeout(() => {
          isloading.value = false;
          console.log('222222222page=>', page);
          getUserLikeFun(userid);

        }, 500)

      }

    })
    onMounted(() => {
      getUserLikeFun(userid);
      window.addEventListener('scroll', onscroll);

    })
    onUnmounted(() => {
      window.removeEventListener('scroll', onscroll)
    })
    console.log(active)

    return {
      active,
      click_user,
      click_video,
      userLikeList,
      filters,
      viewCount,
      vidotime,
      idarr,
      likearr,
      collectlikearr,
      unlikeFuns,
      likeFuns,
      increment,
      incrementfalse,
      collectFuns,
      uncollectFuns,
      isloading,
      total
    }
  }
})
</script>
<template>
  <div class="userLike" v-if="userLikeList">
    <p v-if="total == 0">还没有喜欢哦~</p>
    <!-- 用户喜欢列表 -->
    <div class="userLikeList" v-else>
      <ul>
        <li @click.stop="click_video(item.resource.id, item.resource.vid)" v-for="(item, index) in userLikeList"
          :key="index">
          <div class="content">
            <div class="user">
              <div class="uer_left">
                <div class="user_image" @click.stop="click_user(item.resource.author.userinfo.id)">
                  <img :src="item.resource.author.userinfo.avatar" />
                </div>
                <div class="user_name">
                  {{ item.resource.author.userinfo.username }}
                  <span v-if="item.resource.team.length != 0">等<em>{{ item.resource.team.length }}</em>位创作人</span>
                </div>
              </div>
              <div class="user_right">
                <!-- 关注 -->
                <div class="addfollow" @click.stop="increment(item.resource.author
                  .userinfo.id)" v-if="!idarr.includes(item.resource.author.userinfo.id)">+ 关注</div>
                <div class="addfollow" @click.stop="incrementfalse(item.resource.author.userinfo.id)" v-else>已关注
                </div>
                <div class="logo"><span class="iconfont icon-gengduo"></span></div>
              </div>
            </div>
            <div class="word">{{ item.resource.title }}</div>
            <div class="video">
              <!-- <img src="../assets/images/swiper1.webp" /> -->
              <img :src="item.resource.cover" />
              <!-- <div class="mask">13.1w观看 | 04'04''</div> -->
              <div class="voice">
                <span class="iconfont icon-guanbiyinliang"></span>

              </div>
              <div class="mask">{{ viewCount(item.resource.count.count_view) }}观看 <span style="margin:0 5px">|</span>
                {{ vidotime(item.resource.duration) }}</div>
            </div>
            <div class="bottom">
              <ul>

                <!-- 收藏 -->
                <li @click.stop="collectFuns(item.resource.id)" v-if="!collectlikearr.includes(item.resource.id)"><span
                    class="iconfont icon-31shoucang"></span>{{ filters(item.resource.count.count_collect) }}
                </li>
                <li @click.stop="uncollectFuns(item.resource.id)" v-else><span class="iconfont icon-wodeshoucang"
                    style="color: yellow"></span>{{ filters(item.resource.count.count_collect + 1) }}
                </li>

                <!-- <li>
                    <span class="iconfont icon-31shoucang"></span>{{ filters(item.resource.count.count_collect) }}
                  </li>
                   -->
                <li>
                  <span class="iconfont icon-review"></span>{{ filters(item.resource.count.count_comment) }}
                </li>


                <li @click.stop="likeFuns(item.resource.id)"
                  v-if="!likearr.includes(item.resource.id)"><span
                    class="iconfont icon-dianzan"></span>{{ filters(item.resource.count.count_like) }}
                </li>
                <li @click.stop="unlikeFuns(item.resource.id)" v-else><span
                    class="iconfont icon-dianzan_kuai " style="color: red;"></span>{{ filters(item.resource.count.count_like+1) }}</li>

                <!-- <li>
                    <span class="iconfont icon-dianzan_huaban"></span>{{ filters(item.resource.count.count_like) }}

                  </li> -->
              </ul>
            </div>
          </div>
        </li>
      </ul>
      <van-loading size="24px" v-if="userLikeList.length!=total&&isloading" style="text-align: center;line-height:40px;">加载中...</van-loading>
      <em style="text-align:center;width:100%;display:inline-block;font-size: 14px;background-color:transparent;line-height:40px;color: #a5a5a5;" v-if="userLikeList.length==total">暂无更多了~</em>
    </div>
  
  </div>
</template>
<style lang="scss" scoped>
.userLike {
  background-color: #f7f7f7;

  &>p {
    font-size: 14px;
    width: 100%;
    height: 302px;
    line-height: 302px;
    text-align: center;
    color: #bbbbbb;
  }

  .userLikeList {
    padding-top: 7px;
    background-color: #f7f7f7;

    &>ul {
      &>li {
        background-color: #fff;
        //   width: 100%;
        // height: 320px;
        border-radius: 10px;
        border-top: 0.1px solid transparent;
        margin: 0 12px;
        margin-bottom: 12px;

        .content {
          .user {
            padding: 0 12px;
            margin-top: 12px;
            display: flex;
            justify-content: space-between;

            .uer_left {
              display: flex;

              .user_image {
                margin-right: 5px;

                img {
                  border-radius: 50%;
                  width: 32px;
                  height: 32px;
                }
              }

              .user_name {
                font-size: 12px;
                color: #484848;
                line-height: 32px;

                span {
                  color: #767676;

                  em {
                    color: #1c1c1c;
                    font-weight: 600;
                    font-style: normal;
                    margin-left: 4px;
                  }
                }
              }
            }

            .user_right {
              display: flex;

              .addfollow {
                color: #eb4b3a;
                font-size: 12px;
                margin-right: 19px;
                font-weight: 600;
              }

              .logo {
                span {
                  color: #8a8a8a;
                }
              }
            }
          }

          .word {
            padding: 0 12px;
            font-size: 14px;
            color: #282828;
            font-weight: 600;
            line-height: 31px;
          }

          .video {
            position: relative;

            //   padding:0 12px;
            img {
              width: 100%;
              height: 199px;
              display: flex;
            }

            .mask {
              position: absolute;
              bottom: 0;
              right: 0;
              color: #fff;
              font-size: 12px;
              margin-right: 12px;
              line-height: 30px;
            }

            .voice {
              position: absolute;
              bottom: 10px;
              left: 12px;
              color: #fff;

              span {
                font-size: 18px;
              }
            }
          }

          .bottom {
            height: 40px;

            &>ul {
              display: flex;
              height: 100%;
              align-items: center;

              &>li {
                width: 33.33%;
                text-align: center;
                line-height: 44px;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                  margin-right: 7px;
                  font-size: 20px;
                  color: #6a6869;
                }
              }
            }
          }
        }
      }
    }
  }
}

.userLike>em {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  color: #bbbbbb;
  text-align: center;
  line-height: 40px;
}</style>